<template>
  <div class="container container--zone">
    <div class="region region--full removeLive">
      <!-- 此处要判断是us有的 -->
      <cateGorymenu></cateGorymenu>
      <div class="container container--zone">
    <div class="region region--full">
      <comImg :imgData="imgData"></comImg>
    </div>
  </div>
      <!-- 此处是tab切换 -->
      <tabText :listlinkData="listlinkData" :moreList="moreList" @tabChange="tabChange"></tabText>
      <!-- 此处是标题(导航栏) -->
      <div class="region region--primary">
      <pageHead :titleData="titleData"></pageHead>
      
        <!-- 收益专享 -->
        <frontPage v-if="route.params.nation === 'earnings'" :FrontData="FrontData1" :FrontData1="FrontData2" :titleName="titleName">
        </frontPage>
        <!-- <coveragelrMd v-if="route.params.nation === 'earnings'" :emerTitle='emerTitle'
                    :nationlrData="nationlrData" :nationRightData="nationRightData">
                </coveragelrMd> -->
        <!-- <timeTableMk v-if="route.params.nation === 'earnings'" :timeNewsData='timeNewsData'
                    :titleTime='titleTime1'></timeTableMk> -->
        <!-- 此处是第一部分 股票信息 多个框格式 -->
        <markContent :tickerData="tickerData" v-if="
          route.params.nation !== 'canada' &&
          route.params.nation !== 'earnings' &&
          route.params.nation !== 'latin'||isContent
        "></markContent>
        <!-- 此处是左边一张大图 右边小图加多行文字展示形式 -->
        <movement v-if="
          route.params.nation === 'canada' ||
          route.params.nation === 'emerging'
        " :movementData="movementData" :movementData1="movementData1" :movementData2="movementData2"
          :spendingData="spendingData" :spendingData1="spendingData1"></movement>
        <!-- <topBigImgCont :title="title" :bigImgTitle="bigImgTitle" :topRightSmall="topRightSmall"
                    v-if="route.params.nation === 'canada'"></topBigImgCont> -->
        <!-- 此处是左边大图 右边两张小图 -->
        <!-- <marketLine v-if="route.params.nation === 'emerging'" :lastMarketData="lastMarketData"></marketLine> -->
        <!-- 此处是上图下文字多张图片模块 -->
        <p class="paragraph" v-if="
          route.params.nation === 'us' || route.params.nation === 'europe'
        ">
          The latest news on U.S. markets
        </p>
        <nationNew :usNewsData="usMarketData" v-if="
          route.params.nation === 'us' || route.params.nation === 'europe'
        "></nationNew>
        <!-- newSetter signup模块 -->
        <interactiveTools v-if="route.params.nation === 'europe'" :toolData="toolDataSetter"
          :onMarketTool="noneMarketTool"></interactiveTools>
        <!-- flash sale模块 -->
        <inBox v-if="route.params.nation === 'us'"></inBox>
        <newsViewer v-if="
          route.params.nation === 'asia' ||
          route.params.nation === 'latin' ||
          route.params.nation === 'earnings'
        " :newsData="newsusData" :newstitle="newstitle"></newsViewer>
      </div>
      <stickys :sticky="sticky"></stickys>
      <subNow :subNowData="subNowData"></subNow>
      <mastPopular></mastPopular>
      <div class="region region--primary">
        <!-- <同一模块 标题 -->
        <header class="header header--secondary" v-if="
          route.params.nation === 'us' || route.params.nation === 'europe'
        ">
          <h2 class="title">
            <span class="label">U.S. Markets Overview</span>
          </h2>
        </header>
        <inBox v-if="route.params.nation === 'earnings'"></inBox>
        <newsViewer v-if="
          route.params.nation === 'asia' ||
          route.params.nation === 'latin' ||
          route.params.nation === 'earnings'
        " :newsData="newsusData" :newstitle="newstitle"></newsViewer>

        <tickerName v-if="
          route.params.nation === 'us' ||
          route.params.nation === 'europe' ||
          route.params.nation === 'asia' ||
          route.params.nation === 'latin'
          && tickerNameData.length > 0
        " :tickerNameData="tickerNameData"></tickerName>
        <!-- <同一模块 标题 -->
        <theBell v-if="route.params.nation === 'us'"></theBell>
        <interactiveTools v-if="route.params.nation === 'us'" :toolData="toolData" :onMarketTool="onusMarketTool">
        </interactiveTools>
        <!-- <同一模块 标题 -->
        <newsViewer v-if="
          route.params.nation === 'us' ||
          route.params.nation === 'canada' ||
          route.params.nation === 'europe' ||
          route.params.nation === 'emerging'
        " :newsData="newsusData" :newstitle="newstitle"></newsViewer>
      </div>
      <stickys :sticky="sticky"></stickys>
    </div>
  </div>
  <adverTiseMent></adverTiseMent>
</template>
<script setup>
import tabText from "../../components/tabText/tabText.vue";
import pageHead from "@/components/pageHead/pageHead.vue";
import cateGorymenu from "@/views/latestNews/cateGorymenu/cateGorymenu.vue"; //头部
// import coveragelrMd from './coveragelrMd/coveragelrMd.vue'
import frontPage from "@/views/latestNews/hotheHeadlines/frontPage/frontPage";
// import topBigImgCont from './topBigImgCont/topBigImgCont.vue';
// 引入 movement 传参
import movement from "@/views/personalFinance/movement/movement.vue";
import { usemkDataArrays } from "../../api/market";
import { newsDataArrays } from "../../api/economy";
import markContent from "../market/markContent/markContent.vue";
// import marketLine from '../market/marketLine/marketLine.vue';
import nationNew from "../market/nationNew/nationNew.vue"; //上面图片下面文字格式
import inBox from "./inBox/inBox.vue"; //your inbox 了解更多
import subNow from "../home/subNow/subNow.vue";
import mastPopular from "../home/mastPopular/mastPopular.vue";
import tickerName from "../market/ticketName/tickerName.vue";
import theBell from "./theBell/theBell.vue";
import interactiveTools from "../market/interactiveTools/interactiveTools.vue";
import adverTiseMent from "../home/adverTisement/adverTiseMent.vue";
import newsViewer from "@/views/latestNews/hotheHeadlines/newsViewer/newsViewer";
import comImg from "@/components/comImg/comImg.vue";
const imgData = ref("../src/assets/banner.png");
import stickys from "@/components/stickys/stickys.vue";
const sticky = ref("../src/assets/ceAdver.png");

const { latestData, districtData } = newsDataArrays();
const moreList = reactive([]);
const {
  uscomlinkData,
  subNowData,
  nationlrData,
  onusMarketTool,
  nationRightData,
} = usemkDataArrays();
const titleData = reactive({
  title: "U.S. Markets",
  link: "Home",
  name: "Markets",
  name1: "U.S. Markets",
  keyword: "earnings",
});
import homeRequest from "@/api/home.js";
const FrontData = ref([]);
const arontData = ref([]);

const usMarketData = ref([]);
const newsusData = ref([]);
const newstitle = ref({
  title: "MORE U.S. MARKET NEWS",
  content: "",
});
const movementData = ref([]);
const movementData1 = ref([]);
const movementData2 = ref([]);
const spendingData = ref([]);
const spendingData1 = ref([]);
const popularData = ref([]);

const FrontData1 = ref([]);
const FrontData2 = ref([]);

const titleName = ref({
  title:'',
  name:''
})
const isRegion = ref(false);

function getNewList(tabkey) {
  //新闻列表
  let data = {
    current: "1",
    size: "50",
    key: tabkey,
    isImg: "1",
  };
  homeRequest
    .newsData(data)
    .then((res) => {
      if (res.code == "0") {
        console.log(111);
        console.log(res);
        arontData.value = res.data.records;
        // usMarketData.value = FrontData.value.slice(1, 7);
        if (arontData.value.length >= 10) {
          newsusData.value = arontData.value.slice(0, 10);
        }
        if (arontData.value.length >= 16) {
          movementData.value = arontData.value.slice(10, 11);
          movementData1.value = arontData.value.slice(11, 12);
          movementData2.value = arontData.value.slice(12, 16);
        }
        FrontData1.value = arontData.value.slice(23, 25);
        FrontData2.value = arontData.value.slice(25, 29);
        isRegion.value = true;
        popularData.value = arontData.value.slice(23, 35);
      }
    })
    .catch((e) => {
      console.log("login error", e);
    });
}

function frontData(tabkey) {
  //新闻列表
  let data = {
    key: tabkey,
  };
  homeRequest
    .getgroupData(data)
    .then((res) => {
      if (res.code == "0") {
        console.log(111);
        console.log(res);
        FrontData.value = res.data;
        if (FrontData.value.auto !== null) {

        }
        if (FrontData.value.bs !== null) {
          usMarketData.value = FrontData.value.bs;
        }

        popularData.value = FrontData.value.djn;
        // usNewsData.value = FrontData.value.cl;
        isRegion.value = true;
      }
    })
    .catch((e) => {
      console.log("login error", e);
    });
}
const listlinkData = ref([]);
import { onMounted } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
const tabKey = ref('')
onMounted(async () => {
  const data = localStorage.getItem("tabMdData");
  listlinkData.value = JSON.parse(data).markets;
  listlinkData.value.forEach((item) => {
    if (item.typeName === "Markets") {
      item.path = "/markets";
    } else if (item.typeName === "Market Data Center") {
      item.path = "/marketsData";
    } else if (item.typeName === "U.S. Markets") {
      item.path = "/market/us";
    } else if (item.typeName === "Canada") {
      item.path = "/market/canada";
    } else if (item.typeName === "Europe & Middle East") {
      item.path = "/market/europe";
    } else if (item.typeName === "Asia") {
      item.path = "/market/asia";
    } else if (item.typeName === "Emerging Markets") {
      item.path = "/market/emerging";
    } else if (item.typeName === "Latin America") {
      item.path = "/market/latin";
    } else if (item.typeName === "Earnings") {
      item.path = "/market/earnings";
    }
  });
  // 刷新时保持数据
  let name = window.sessionStorage.getItem("titleData");
  if (name) {
    titleData.title = JSON.parse(name).typeName;
    titleData.name1 = titleData.title;
    tabKey.value = JSON.parse(name).typeKey
  }
  await frontData(tabKey.value);
  await getNewList(tabKey.value);
  await getTickList(tabKey.value);
  await lastContent(tabKey.value);
  
  
});
// 股票接口 
const tickerNameData = ref([])
const getTickList = (tabKey) => {
  let data = {
    key: tabKey  //当前页面
  }
  homeRequest.getTicketData(data)
    .then((res) => {
      tickerNameData.value = res.data
    })
}
const tabChange = (data) => {
  // 点击Tba切换时存数据
  window.sessionStorage.setItem("titleData", JSON.stringify(data));
  titleData.title = data.typeName;
  titleData.name1 = titleData.title;
  arontData.value = [];
  FrontData.value = [];
  tickerNameData.value = [];
  tickerData.value = [];
  frontData(data.typeKey)
  getNewList(data.typeKey)
  getTickList(data.typeKey)
  lastContent(data.typeKey)
  
};
watch(
  () => route.params,
  (newParams, oldParams) => { }
);
// 新闻列表
const tickerData = ref([]);
const isContent = ref(false);
function lastContent(tabkey){
  let data = {
    key: tabkey,
  };
  homeRequest
    .getTicketData(data)
    .then((res) => {
      if (res.code == "0") {
        console.log(res,'lastContent');
        tickerData.value = res.data;
        isContent.value = true;
      }
    })
    .catch((e) => {});
}
const toolDataSetter = reactive({
  h2: "Sign up for Europe Daily newsletter",
  isshow: false,
  cont: "Get top headlines impacting European markets each day.",
});
const noneMarketTool = reactive([]); //通过此判断来是否显示
const toolData = reactive({
  h2: "",
  isshow: false,
  cont: "",
});
const toTop = () => {
  window.scrollTo({
    top: 0,
    behavior: "smooth",
  });
};
</script>
<style scoped lang="scss">
.group--buttons {
  width: auto;
  margin-top: 10px;
}
</style>
